<template>
	<!-- 邀请好友列表 -->
	<view class="invitegoodfriends_wrapper_color">	
		<!-- 顶部的盒子 -->
		<view class="invitegoodfriends_wrapper">
			<view class="invitegoodfriends_header">
				<!-- 头像盒子 -->
				<view class="invitegoodfriends_header_image">
					<image :src="user.avatar" class="invitegoodfriends_top_image"></image>
					<image :src="setGrade" class="invitegoodfriends_grade"></image>
					<view class="invitegoodfriends_user_name">{{user.nickname}}</view>
				</view>
				<!-- 边框盒子 -->
				<view class="invitegoodfriends_header_border"></view>
				<!-- 右边个人信息盒子 -->
				<view class="invitegoodfriends_header_user">
					<!-- <view class="invitegoodfriends_user">我的推荐人:{{user.parent_mobile}}</view> -->
					<view class="invitegoodfriends_person">
						<view>团队人数:{{user.all_num}}</view>
						<view>直推人数:{{user.direct_invite_num}}</view>
						<view>团队持币:{{$util.roundNumber(user.mine_total_amount,2)}}PCD</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 推荐人列表 -->
		<view class="invitegoodfriends_lists" v-for="(item,index) in data" :key="item.create_time">
			<view class="invitegoodfriends_lists_header">
				<view class="invitegoodfriends_lists_header_name">
					<view class="invitegoodfriends_lists_header_name_font">{{item.nickname}}</view>
					<view>团队人数:{{item.all_num}}人</view>
				</view>
				<!-- 定位的用户头像 -->
				<view class="invitegoodfriends_item_user">
					<image :src="item.avatar" class="invitegoodfriends_item_user_image"></image>
					<image :src="getGrade(index)" class="invitegoodfriends_item_user_image_grade"></image>
				</view>
				<!-- 定位 -->
			</view>
			<view class="invitegoodfriends_item">
				<view class="invitegoodfriends_item_list">
					<view>个人持币:</view>
					<view>{{$util.roundNumber(item.total_amount,2)}}PCD</view>
				</view>
				<view class="invitegoodfriends_item_list invitegoodfriends_item_list_margin">
					<view>团队持币:</view>
					<view>{{ $util.roundNumber(item.mine_total_amount,2)}}PCD</view>
				</view>

			</view>
		</view>
		<!-- 上拉加载组件 -->
		<uLi-load-more :status="loadingType" :contentText="contentText"></uLi-load-more>
	</view>
</template>
<script>
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	export default {
		onReachBottom() { //下拉刷新
			this.page++
			this.getUserFriendsList()
		},
		components: {
			uLiLoadMore
		},
		onLoad() {
			this.page = 1;
			this.getUserFriendsList()
		},
		data() {
			return {
				limit: 10,
				page: 1,
				user: {},
				data: [],
				generalPage: 0, //总页数
				// 顶级图标
				picture: [{
						id: 0,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v.png',
						grade: "V0"
					},
					{
						id: 1,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-1.png',
						grade: "V1"

					},
					{
						id: 2,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-2.png',
						grade: "V2"
					},
					{
						id: 3,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-3.png',
						grade: "V3"
					},
					{
						id: 4,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-4.png',
						grade: "V4"
					},
					{
						id: 5,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-6.png',
						grade: "V5"
					}
				],
				loadingType: "contentdown", //当前下拉刷新的状态
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
			}

		},
		// 计算等级
		computed: {
			setGrade() {
				let grade = '';
				if (this.user.grade) {
					this.picture.forEach(item => {
						if (item.grade == this.user.grade) {
							grade = item.name
						}
					});
					return grade
				}
			}
		},
		methods: {
			// 获取邀请好友列表
			getUserFriendsList() {
				this.loadingType = "contentrefresh"
				this.$api.getUserFriends({
					limit: this.limit,
					page: this.page
				}, res => {
					if (res.data.type == 'ok') {
						this.user = res.data.message.user;
						this.data = [...this.data, ...res.data.message.data]
						this.generalPage = Math.ceil(res.data.message.count / this.limit);
						if (Math.ceil(res.data.message.count / this.limit) <= this.page) { //判断请求的页数是否超过总页数
							this.loadingType = "contentnomore"
							return
						};
						if (this.page >= this.generalPage) {
							this.loadingType = "contentdown"
							this.page++
							return
						}
					}
				})
			},
			// 获取推荐人的等级图标
			getGrade(index) {
				var self = this;
				let a = this.picture.filter(function(item) {
					return item.grade == self.data[index].grade
				});
				return a[0].name
			}


		}
	}
</script>
<style lang="scss" scoped>
	.invitegoodfriends_wrapper_color {
		background: #fff;
	}

	.invitegoodfriends_wrapper {
		height: 311upx;
		padding: 68upx 0 89upx 107upx;
		box-sizing: border-box;
		border-radius: 0 0 20upx 20upx;
		background-image: url("https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/invite_banner.png");
		background-size: 100% 100%;

		// 分享头部
		.invitegoodfriends_header {
			display: flex;
			height: 154upx;

			.invitegoodfriends_header_image {
				position: relative;
				height: 116upx;
				width: 116upx;
				margin-right: 80upx;
				margin-bottom: 11upx;

				.invitegoodfriends_top_image {
					width: 100%;
					height: 100%;
					border-radius: 50%;

				}

				.invitegoodfriends_grade {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 40upx;
					height: 37upx;
				}

				.invitegoodfriends_user_name {
					text-align: center;
					font-size: 14px;
					color: #F7F7F7;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			// 中间边框盒子
			.invitegoodfriends_header_border {
				height: 124upx;
				border: 1upx solid #1E2340;
				margin: 13upx 87upx 0 0;
			}

			.invitegoodfriends_header_user {
				color: #F7F7F7;

				.invitegoodfriends_user {
					height: 20upx;
					font-weight: 400;
					font-size: 12px;
				}

				.invitegoodfriends_person {
					display: flex;
					flex-direction: column;

					view {
						margin-top: 21upx;
						font-size: 10px;
						height: 20upx;
						font-size: 12px;
					}
				}

				.invitegoodfriends_user_iamge {
					width: 366upx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					view {
						width: 43upx;
						height: 43upx;
						text-align: center;

						image {
							width: 100%;
							height: 100%;
						}

					}
				}

				.invitegoodfriends_grade_namber {
					width: 366upx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					view {
						width: 43upx;
						height: 43upx;
						text-align: center;


					}
				}

			}


		}

		// 下面的下好那厂房行盒子
		.invitegoodfriends_currency {
			display: flex;
			justify-content: space-between;
			box-shadow: 0 0 5upx 5upx #212542;
			border-radius: 10upx 10upx 10upx 10upx;
			height: 43upx;
			line-height: 43upx;
			padding: 0 19upx;
			margin-top: 43upx;
			box-sizing: border-box;
			font-size: 10px;
			color: #FAFAFA;

			view {
				height: 18upx;
				font-size: 10px
			}


		}

		// 用户头像
		// .invitegoodfriends_header_image{
		//     position: relative;
		//     width: 109upx;
		//     height: 109upx;
		//     margin: 0 auto;
		//     .invitegoodfriends_top_image{
		//         width: 100%;
		//         height: 100%;
		//         border-radius: 50%;
		//     }
		//     .invitegoodfriends_grade{
		//         position: absolute;
		//         bottom: 0;
		//         right: 0;
		//         width: 37upx;
		//         height: 37upx;
		//     }
		// }
		// 用木名字
		.invitegoodfriends_name {
			height: 26px;
			font-size: 26px;
			margin-top: 13upx;
			text-align: center;
			color: rgba(247, 247, 247, 1);
			font-weight: 400;
			line-height: 26px;
		}

		// 团队和·直推人数
		.invitegoodfriends_team_number {
			display: flex;
			justify-content: space-between;
			width: 500upx;
			margin: 0 auto;
			font-size: 9px;
			font-weight: 400;
			color: rgba(247, 247, 247, 1);
		}

		.invitegoodfriends_team {
			display: flex;
			width: 286upx;
			justify-content: space-evenly;
			margin: 20upx auto 10upx;
			flex-wrap: wrap;

			view {
				width: 48upx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// .invitegoodfriends_currency{
		//     display: flex;
		//     justify-content: space-between;
		//     border: 1px dotted #fff;
		//     border-radius: 10upx  10upx  10upx  10upx ;
		//     height: 50upx;
		//     line-height: 50upx;
		//     padding: 0 19upx;
		//     box-sizing: border-box;
		//     width: 696upx;
		//     margin: 0 auto;
		// }
	}

	.invitegoodfriends_lists {
		height: 235upx;
		box-sizing: border-box;
		// background-color: pink;
		padding: 42upx 40upx 27upx 67upx;
		background: #fff;

		.invitegoodfriends_lists_header {
			position: relative;
			height: 50upx;

			padding-left: 87upx;
			box-sizing: border-box;


			.invitegoodfriends_lists_header_name {
				display: flex;
				justify-content: space-between;
				font-size: 10px;
				padding-top: 8upx;
				color: rgba(51, 51, 51, 1);

				.invitegoodfriends_lists_header_name_font {
					font-size: 12px;
					font-weight: 600;

				}

			}

			.invitegoodfriends_lists_header_person {
				// margin-top: -4upx;
				display: flex;
				justify-content: flex-end;
				font-size: 10px;

				view {
					height: 17upx;
					font-size: 8px;
					font-weight: 400;
					color: #999999;
					line-height: 17upx;

					// opacity:0.5;
					image {
						transform: translateY(-13%);
						vertical-align: middle;
						width: 14upx;
						height: 15upx;
						margin-right: 5upx;

					}
				}
			}

			.invitegoodfriends_item_user {
				position: absolute;
				// position: relative;
				top: 0;
				left: 0;
				z-index: 222;
				width: 77upx;
				height: 77upx;
				background: #fff;
				border-radius: 50%;

				.invitegoodfriends_item_user_image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.invitegoodfriends_item_user_image_grade {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 30upx;
					height: 30upx;

					image {
						width: 100%;
						height: 100%;
					}

				}

			}
		}

		.invitegoodfriends_item {
			height: 137upx;
			border: 1upx solid #E5E5E5;
			padding: 40upx 22upx;
			box-sizing: border-box;
			font-size: 10px;
			// opacity:0.1;
			border-radius: 10px;

			.invitegoodfriends_item_list {
				display: flex;
				justify-content: space-between;



				height: 20upx;
				font-size: 10px;
				font-weight: 400;
				color: #666666;
				// line-height: 20upx;



				.invitegoodfriends_item_grade {
					width: 250upx;
					display: flex;
					justify-content: space-evenly;
					flex-wrap: wrap;

					view {
						width: 30upx;
						height: 30upx;
						line-height: 20upx;
						text-align: center;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.invitegoodfriends_item_grade_number {
					width: 250upx;
					display: flex;
					justify-content: space-evenly;
					flex-wrap: wrap;
					font-size: 5px;

					view {
						width: 30upx;
						height: 30upx;
						line-height: 20upx;
						text-align: center;

					}
				}

			}

			.invitegoodfriends_item_list_margin {
				margin-top: 22upx;
			}

		}

	}
</style>
